<template>
    <!-- <json-editor-vue class="editor" v-model="data" language="zh-CN" /> -->
    <div >
        <el-card :class="{'tag':!emitStatus}">
            <div class="body">
                <div class="title">
                    <div class="avatar">
                        <el-avatar :src="avatarSrc"></el-avatar>
                        <div style="text-align: center;color: #19191a;font-size: 14px;">{{ userName }}</div>
                    </div>
                    <div class="info">
                        <div class="name">
                            <span style="margin-right: 15px;color: rgb(0, 0, 0);">{{ form.processName }}</span>
                            <span><el-tag>审核进行中</el-tag></span>
                        </div>
                        <div class="code">
                            <span>编号：</span>
                            <span>{{ form.flowId }}</span>
                        </div>
                    </div>
                </div>
                <div class="form">
                    <el-skeleton v-if="!showForm" :rows="8" />
                    <div class="formData"></div>
                </div>
                <el-card>
                    <tsTimeLine v-if="form.processInstanceId" :processInstanceId="form.processInstanceId"
                        :flow-id="form.flowId" :taskId="taskId" :businessKey="form.billId" ref="flowNodeFormatRef"></tsTimeLine>
                </el-card>
            </div>
            <div class="footer">
                <div style="position: relative;width: 100%;">
                    <div class="left" @click="dialogVisible = true">
                        <el-icon style="font-size: 20px;">
                            <ChatLineRound />
                        </el-icon>
                        <div>评论</div>
                    </div>
                    <div class="right">
                        <el-button type="success" @click="compelte">通过</el-button>
                        <el-button type="danger" @click="refuse">拒绝</el-button>
                    </div>
                </div>
            </div>
            <el-dialog v-model="dialogVisible" title="审核评论">
                <el-form v-model="form" label-position="top" label-width="70px">
                    <el-form-item>
                        <el-input v-model="remark" :autosize="{ minRows: 2, maxRows: 10 }" type="textarea"
                            placeholder="请输入评论内容" />
                    </el-form-item>
                    <el-form-item>
                        <tsMultiple v-model="dataList" :addTemplate="addTemplate">
                            <template #tableContent>
                                <el-table-column prop="fileName" label="文件名"></el-table-column>
                                <el-table-column label="图片">
                                    <template #default="scope">
                                        <el-image v-if="checkType(scope.row) == 'image'" alt="上传图片"
                                            :src="scope.row.fileFullPath"
                                            @click="openDialog(scope.row.fileFullPath)"></el-image>
                                        <video v-else-if="checkType(scope.row) == 'video'" :src="scope.row.fileFullPath"
                                            controls style="width: 100%;height: 100%;"></video>
                                    </template>
                                </el-table-column>
                            </template>
                        </tsMultiple>
                    </el-form-item>
                </el-form>
                <div style="text-align: center;">
                    <el-button @click="refuse">拒 绝</el-button>
                    <el-button type="primary" @click="compelte">通 过</el-button>
                </div>
            </el-dialog>
            <el-dialog v-model="dialogVisible2">
                <img :src="dialogImageUrl" alt="预览" w-full style="width: 100%;" />
            </el-dialog>
        </el-card>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive, createVNode, render, getCurrentInstance } from 'vue'
import { SuccessFilled, ChatLineRound } from '@element-plus/icons-vue'
import { ElNotification } from 'element-plus';
import { useRoute,useRouter } from 'vue-router'
import tsTimeLine from '@/components/tsTimeLine/index.vue'
import tsMultiple from '@/components/tsUpload/multipe.vue'
import { checkType } from '@/utils/checkType.js'
import Api from '@/api/model/workflow.js'
import tool from '@/utils/tool.js'
import useTabs from '@/utils/useTabs'
import store from '@/store/index.js'
const emit = defineEmits(['updatetable'])
const route = useRoute()
const router = useRouter()
const instance = getCurrentInstance()
const props = defineProps({
    paramsData: {
        type: Object,
        defalut: {}
    }
})
const emitStatus = ref(true)
const taskId = ref('')
const avatarSrc = ref()
const userName = ref()
const dialogVisible = ref(false)
const dialogVisible2 = ref(false)
const showForm = ref(false)
const dialogImageUrl = ref()
const form = ref({})
const formData = reactive({})
const remark = ref('')
const dataList = ref([])
const addTemplate = reactive({
    fileKind: '',
    file: '',
    fileFullPath: '',
    number: '',
    name: '',
    id: '',
})
onMounted(() => {
    let userInfo = tool.data.get("USER_INFO")
    avatarSrc.value = userInfo.fileFullPath
    userName.value = userInfo.nam
    getData()
})
const getData = async () => {
    let param;
    if (JSON.stringify(route.query) !== '{}') {
        emitStatus.value = false
        param = {
            id: route.query.id.toString()
        }
        taskId.value = route.query.id
    }
    else {
        param = {
            id: props.paramsData.id.toString()
        }
        taskId.value = props.paramsData.id
    }
    let res = await Api.task.queryTask.post(param)
    if (res.code == 200) {
        form.value = res.data
        open()
    }
}
const open = () => {
    let paramsData = {
        id: form.value.billId
    }
    let noButton = true
    const box = document.querySelector(".formData")
    import(`@/views${form.value.reviewPageUrl}`).then((res) => {
        const form = createVNode(res.default, {
            paramsData,
            noButton
        })
        form.appContext = instance.appContext
        render(form, box)
        showForm.value = true
    })
}
const openDialog = (val) => {
    dialogImageUrl.value = val
    dialogVisible2.value = true
}
const compelte = async () => {
    formData[form.value.node.id + '_approve_condition'] = true
    let params = {
        taskId: taskId.value,
        taskLocalParamMap: {
            approveDesc: remark.value
        },
        paramMap: formData,
        files: dataList.value
    }
    let res = await Api.task.complete.post(params)
    if (res.code == 200) {
        ElNotification.success({ title: '', message: '操作成功！', duration: 2000 });
        store.commit("SET_msgCount", store.state.global.msgCount-1);
        if (emitStatus.value == true) {
            emit('updatetable', true)
        }
        else {
            useTabs.close()
            router.back()
        }

    }
}
const refuse = async () => {
    formData[form.value.node.id + '_approve_condition'] = false
    let params = {
        taskId: taskId.value,
        taskLocalParamMap: {
            approveDesc: remark.value
        },
        paramMap: formData,
        files: dataList.value
    }
    let res = await Api.task.complete.post(params)
    if (res.code == 200) {
        ElNotification.success({ title: '', message: '操作成功！', duration: 2000 });
        store.commit("SET_msgCount", store.state.global.msgCount-1);
        if (emitStatus.value == true) {
            emit('updatetable', true)
        }
        else {
            useTabs.close()
            router.back()
        }
    }
}
</script>
<style scoped>
.tag{
    position: absolute;
    width: 96%;
}
.body {
    background: #eeeeee;
    position: relative;
    height: 100%;
}

.title {
    background: white;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    position: relative;
    padding: 0 10px 10px;
}

.a-avatar {
    display: flex;
    flex-direction: row;
    position: relative;
    align-items: center;
    justify-content: center;
    flex-direction: column !important;
}

.info {
    height: 50px;
    display: flex;
    padding: 0 10px;
    position: relative;
    flex-direction: column;
    justify-content: space-between;
}

.name {
    font-size: 15px;
    color: #5e5e5e;
}

.code {
    font-size: 13px;
    color: rgb(108, 108, 108);
}

.form {
    margin: 15px 0;
    background: white;
    overflow: auto;
    max-height: 380px;
}

.footer {
    height: 60px;
    padding: 15px 0;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 9;
    background: white;
    border-top: 1px solid #dcdfe6;
    box-shadow: 0 0 15px #dad8d8;
}

.left {
    position: absolute;
    left: 20px;
    top: -5px;
    cursor: pointer;
    text-align: center;
    font-size: 12px;
}

.right {
    position: absolute;
    right: 20px;
}
</style>
